:root {
    --vw: 1920;
    --vh: 1080;
    --cvw: calc(100vh / var(--vh));
    --cvh: calc(100vw / var(--vw));
}

html {
    scroll-behavior: smooth;
}

ul, ol, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

small {
    font-weight: normal;
    font-size: xx-small;
    color: $danger;
}

.hide, .hidden {
    display: none !important;
}

.v-hide, .v-hidden {
    visibility: hidden !important;
}

.scrollbar {
    @extend %scrollbar;
}

.flex-auto {
    flex: auto;
}

.d-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.d-flex-auto {
    display: flex;
    flex-direction: row;

    > * {
        flex: auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;

        &:first-child {
            padding-left: 0;
        }

        &:last-child {
            padding-right: 0;
        }
    }

    > .form-check .form-check-input {
        margin-left: 0;
        margin-right: 0.5rem;
    }
}

.col1 {
    display: flex;
    flex-direction: column;
}

.col2, .col3, .col4, .col5 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.col2 > * {
    width: 50%;
    padding-right: 0.5rem;
}

.col3 > * {
    width: calc(100% / 3);
    padding-right: 0.5rem;
}

.col4 > * {
    width: 25%;
    padding-right: 0.5rem;
}

.col5 > * {
    width: 20%;
    padding-right: 0.5rem;
}

.trans-y, .bi-trans-y:before {
    transform: rotate(90deg);
}

.trans-x, .bi-trans-x:before {
    transform: rotate(180deg);
}

//form
.input-group-prepend,
.input-group-append {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;

    > button {
        &:focus, &:hover, &:active {
            box-shadow: none !important;
        }
    }
}

.input-group-append > .form-check {
    padding-right: 0.35rem;
}

.input-group-prepend > .form-check {
    margin-left: 1.35rem;
}

.input-group-prepend a:first-child,
.input-group-prepend button:first-child,
.input-group-prepend label:first-child,
.input-group-prepend img:first-child,
.input-group-append a:last-child,
.input-group-append button:last-child,
.input-group-append label:last-child,
.input-group-append img:last-child {
    color: currentColor;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 0.15rem;
}

.input-group-prepend a:first-child,
.input-group-prepend button:first-child,
.input-group-prepend label:first-child,
.input-group-prepend img:first-child {
    left: 0;
    right: auto;
}

.input-group-prepend .form-control {
    padding-left: 2.35rem;
}

.input-group-append .form-control {
    padding-right: 2.35rem;
}

.input-group-prepend img:first-child,
.input-group-append img:last-child {
    padding: 0;
    top: 2px;
    cursor: pointer;
}

.input-group-prepend img:first-child {
    left: 2px;
}

.input-group-append img:last-child {
    right: 2px;
}

form > div {
    margin-bottom: 0.5rem;
}

.input-group {
    input[type=datetime-local]:not([step]) {
        width: 205px !important;
    }

    input[type=datetime-local][step] {
        width: 227px !important;
    }

    input[type=date] {
        width: 133px !important;
    }

    input[type=time] {
        width: 90px !important;
    }

    input[type=month], input[type=week] {
        width: 135px !important;
    }
}

.input-group-range {
    > *:not(:last-child) {
        border-right-color: $input-bg !important;
        padding-right: 0.375rem !important;

        &.input-group-append, &.input-group-prepend {
            > *:last-child {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                border-right-color: $input-bg;
            }
        }
    }

    > *:not(:first-child) {
        border-left-color: $input-bg !important;
        padding-left: 0.375rem !important;

        &.input-group-append, &.input-group-prepend {
            > *:first-child {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                border-left-color: $input-bg;
            }
        }
    }

    > .divider {
        border-top: $input-border-width solid $input-border-color;
        border-bottom: $input-border-width solid $input-border-color;
        background-color: $input-bg;
        display: inline-flex;
        align-items: center;

        + input, + select {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left-color: $input-bg;
        }
    }

    > button, > a, > label, > img {
        color: currentColor;
        background-color: $input-bg;
        border: 1px solid $input-border-color;
        border-top-right-radius: $input-border-radius;
        border-bottom-right-radius: $input-border-radius;
        padding: 0.375rem 0.75rem;
    }
}

.form-floating > img {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    height: 50px;
}

::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
}

//color
input.form-control[type=color],
input.form-control[type=range] {
    min-height: 36.5px;
    padding: 1px;
}

input.form-control.form-color[readonly] {
    background-color: $input-bg;
    cursor: default;
}

//checkbox and radio
@each $color, $value in $theme-colors {
    @if $color != 'light' {
        .form-checkbox-#{$color} .form-check-input:checked, .form-radio-#{$color} .form-check-input:checked {
            background-color: $value;
            border-color: $value;
        }
    }
}

.radio-list.horizontal, .checkbox-list.horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;

    label ~ label {
        margin-left: 1rem;
    }
}

//switch
input[data-switch] {
    display: none;
}

input[data-switch] + label {
    width: 56px;
    height: 24px;
    background-color: #f1f3fa;
    background-image: none;
    border-radius: 2rem;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    position: relative;
    transition: all .1s ease-in-out;
}

input[data-switch] + label:before {
    color: #313a46;
    content: attr(data-off-label);
    display: block;
    font-family: inherit;
    font-weight: 500;
    font-size: .75rem;
    line-height: 24px;
    position: absolute;
    right: 3px;
    margin: 0 .21667rem;
    top: 0;
    text-align: center;
    min-width: 1.66667rem;
    overflow: hidden;
    transition: all .1s ease-in-out;
}

input[data-switch] + label:after {
    content: '';
    position: absolute;
    left: 4px;
    background-color: #adb5bd;
    box-shadow: none;
    border-radius: 2rem;
    height: 18px;
    width: 18px;
    top: 3px;
    transition: all .1s ease-in-out;
}

input[data-switch]:checked + label:before {
    color: $white;
    content: attr(data-on-label);
    right: auto;
    left: 4px;
}

input[data-switch]:checked + label:after {
    left: 34px;
    background-color: #f1f3fa;
}

input[data-switch]:checked + label {
    background-color: $primary;
}

@each $color, $value in $theme-colors {
    input[data-switch=#{$color}]:checked + label {
        background-color: $value;
    }
}

input[data-switch=bool] + label:before,
input[data-switch=bool]:checked + label:before {
    color: $white !important;
}

input[data-switch=bool] + label:after {
    background-color: $gray-100;
}

input[data-switch=bool] + label {
    background-color: $danger;
}

input:disabled + label {
    opacity: .5;
    cursor: default;
}

//dropdown
.dropdown-indicator {
    position: relative;

    &:after {
        content: "";
        display: block;
        position: absolute;
        right: 5px;
        height: 0.4rem;
        width: 0.4rem;
        border-right: 2px solid $gray-700;
        border-bottom: 2px solid $gray-700;
        top: 50%;
        transform: translateY(-50%) rotate(405deg);
        transition: $transition-base;
        transform-origin: center;
        transition-property: transform, border-color;
        border-color: currentColor;
    }

    &[aria-expanded="true"]:after, &.show:after {
        transform: translateY(-50%) rotate(225deg);
    }
}

.dropdown.action-end {
    display: inline-block;
    float: right;
    margin-right: 6px;
}

.action-dropdown {
    color: inherit;
    display: block;
    text-align: center;

    &:after {
        display: none !important;
    }
}

.dropdown-menu {
    padding: 0.25rem 0;

    .dropdown-item {
        width: auto;
        padding: 0.15rem 0.5rem;
        border-radius: 5px;
        margin: 0.1rem 0.25rem;

        [class^="bi-"], [class*=" bi-"] {
            margin-right: 0.75rem;
        }
    }
}

.hover-menu {
    position: relative;
    cursor: pointer;

    &:hover > .hover-menu-panel {
        display: block;
    }

    > .hover-menu-panel {
        cursor: default;
        position: absolute;
        display: none;
        left: 0.25rem;

        &.hover-menu-end {
            left: auto;
            right: 0.5rem;
        }

        > .hover-menu-container {
            border-radius: 4px;
            padding: 1rem;
            background: $white;
            margin-top: 1rem;
            box-shadow: 0 2px 8px rgb(0, 0, 0, 0.2);
        }
    }
}

//btn
@each $color, $value in $theme-colors {
    @if $color != 'light' {
        .btn-#{$color}, .btn-#{$color}:hover, .btn-#{$color}:focus, .btn-#{$color}.disabled, .btn-#{$color}:disabled {
            color: $white;
        }
    }
}

.btn-white {
    color: $secondary;
    border-color: $gray-300;

    &:hover, &:focus {
        background-color: $gray-100;
        border-color: $gray-400;
    }
}

.btn-white.active {
    @extend .btn-primary;
}

@each $color, $value in $theme-colors {
    @if $color != 'light' {
        .btn-outline-#{$color}:hover, .btn-outline-#{$color}:focus {
            color: $white;
            background-color: $value;
        }
    }
}

.btn-outline-white {
    color: $gray-300;
    border-color: $gray-300;

    &:hover, &:focus {
        background-color: $gray-400;
        border-color: $gray-400;
    }
}

.btn > i[class^="bi-"] ~ span,
.btn > i[class*=" bi-"] ~ span {
    margin-left: 0.35rem;
}

.btn-group > .btn:not(:first-child) {
    border-left: 0;
}

//breadcrumb
.breadcrumb-item + .breadcrumb-item::before {
    font-family: bootstrap-icons !important;
    content: '\f285';
    color: currentColor;
}

//modal
.modal-dialog.alert-dialog .modal-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 3rem;

    .icon {
        font-size: 50px;
    }

    .msg {
        padding-left: 2rem;
        line-height: 1.8;
    }
}

.modal-validation-summary {
    display: flex;
    padding: 0.5rem;

    > span[class^="bi-"],
    > span[class*=" bi-"] {
        margin-right: 0.5rem;
    }
}

.modal-body > table {
    margin-top: -1rem;
}

//tabs
.nav-tabs {
    &.bordered {
        .nav-link {
            color: $gray-700;

            &.active {
                font-weight: 600;
            }
        }
    }

    &:not(.bordered) {
        border: none;

        li.nav-item {
            margin-bottom: 0;

            &:not(:last-child) {
                margin-right: 0.8rem;
            }

            .nav-link {
                color: $gray-600;
                border: none;
                padding: 0 0 0.5rem;
                border-bottom: 3px solid transparent;
            }

            .nav-link.active,
            .nav-link:focus {
                border-bottom-color: transparent;
            }

            .nav-link:hover, .nav-link:focus {
                color: $gray-700;
                border-bottom-color: $primary;
                transition: .2s ease;
            }

            .nav-link.active {
                color: $gray-700;
                font-weight: 600;
                background-color: transparent;
                border-bottom-color: $primary;
            }
        }
    }

    .nav-muted {
        @extend small;
        display: flex;
        align-items: flex-end;
        flex: auto;
        padding-bottom: 0.25rem;
        justify-content: flex-end;
    }

    .nav-item-end {
        display: flex;
        align-items: flex-end;
        flex: auto;
        padding-bottom: 0.25rem;
        justify-content: flex-end;
    }

    + .card {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}
//page
.pagination {
    justify-content: flex-end;
}

//table
th.checkbox, td.checkbox {
    width: 39px;
    text-align: center;
}

th.checkbox + th, td.checkbox + td {
    padding-left: 0 !important;
}

th.action, td.action {
    width: 64px;
    text-align: center;
}
//sorting
th.sorting,
th.sorting-asc,
th.sorting-desc {
    padding-right: 30px;
    padding-left: .95rem;
    position: relative;
    cursor: pointer;
}

th.sorting:before,
th.sorting:after,
th.sorting-asc:before,
th.sorting-asc:after,
th.sorting-desc:before,
th.sorting-desc:after,
th.sorting-asc-disabled:before,
th.sorting-asc-disabled:after,
th.sorting-desc-disabled:before,
th.sorting-desc-disabled:after {
    position: absolute;
    bottom: 0.9rem;
    display: block;
    opacity: 0.3;
    font-family: bootstrap-icons;
    right: .5rem;
    left: auto;
    font-size: 0.75rem;
}

th.sorting:before,
th.sorting-asc:before,
th.sorting-asc-disabled:before,
th.sorting-desc:before,
th.sorting-desc-disabled:before {
    content: "\f235";
    top: calc(50% - 14px);
}

th.sorting:after,
th.sorting-asc:after,
th.sorting-asc-disabled:after,
th.sorting-desc:after,
th.sorting-desc-disabled:after {
    content: "\f229";
    top: calc(50% - 6px);
}

th.sorting-asc:before,
th.sorting-desc:after {
    opacity: 1;
}

.table > :not(:first-child) {
    border-top: 1px solid $table-border-color;
}

//warning
.null-warning {
    height: 50vh;
    padding: 5rem 5rem !important;
    text-align: center;
    width: 100%;
    border: 0;

    i {
        display: block;
        font-size: 100px;
    }
}

//alert
.alert {
    > h5 {
        font-weight: 700;
    }

    > p:last-child {
        margin-bottom: 0;
    }
}

.alert-default {
    color: $white;
    background-color: $gray-200;
    border-color: $gray-300;
}

.label, span[class^="alert-"], label[class^="alert-"], span[class*=" alert-"], label[class*=" alert-"] {
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    border-radius: 4px;
    padding: 0 5px;
    height: 20px;
    width: auto;
    margin: 0;

    &:hover, &:focus {
        text-decoration: none;
    }
}

.label {
    color: currentColor;
    border: 1px solid currentColor;
}
//editor
body.fullscreen {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.fullscreen-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: $zindex-fixed + 1;
    border: 0 !important;
    border-radius: 0 !important;
}

.mozmd-editor {
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    height: 100%;
    min-height: 100px;
    width: 100%;
    border-radius: $input-border-radius;
    border: 1px solid $input-border-color;
}

.mozmd-toolbar {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    border-bottom: 1px dashed #ddd;
    padding: 6px 6px;
    position: sticky;
    line-height: 26px;
    top: 0;
}

.mozmd-toolbar a {
    padding: .25rem .5rem;
    line-height: 1.5;
    border-radius: .2rem;
    cursor: pointer;
}

.mozmd-toolbar a:hover,
.mozmd-toolbar a:focus {
    background-color: #e2e2e2;
    border-radius: 4px;
}

.mozmd-toolbar a i {
    color: #969595;
}

.mozmd-left {
    flex: 1 1 auto;
}

.mozmd-right {
    flex: 1 1 auto;
    text-align: right;
    vertical-align: middle;
}

.mozmd-source {
    display: block;
    flex: 1 1 auto;
    line-height: 1.5rem;
    background: #eee;

    @extend %scrollbar;

    &:focus {
        box-shadow: none;
        background: #fff;
        outline: 0;
    }
}

.mozmd-preview {
    display: none;
    flex: 1 1 auto;
    background: #fff;

    @extend %scrollbar;
}

.mozmd-source-value,
.mozmd-html-value {
    display: none;
}

//copy
[_click^="copy"] {
    cursor: pointer;
}

//offcanvas
.offcanvas-header {
    background-color: $dark;
    color: $light;

    h3 {
        margin: 0;
    }

    .btn-close {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 100%;
        margin-right: 0;
        background-color: $light !important;
    }
}

.toolbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-bottom: 0.5rem;
    padding-top: 1rem;

    > form {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
        flex-direction: row;

        > div {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            margin-right: 0.5rem;

            > label {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                flex: 0 0 auto;

                &.form-check > .form-check-input {
                    margin-right: 0.5rem;
                    margin-top: 0;
                }
            }
        }
    }

    > div, > .actions {
        flex: auto;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        flex-wrap: wrap;

        > .btn-group {
            margin-bottom: 0.5rem;

            .btn:focus, .btn:hover {
                box-shadow: none;
            }

            + .btn-group {
                margin-left: 0.5rem;
            }
        }
    }

    .checked-visible {
    }
}

a.action-link > i {
    margin-right: 0.25rem;
}

a.action-link + a.action-link {
    margin-left: 0.5rem;
}

//card
.card {
    &:not(.borderless) {
        box-shadow: $card-box-shadow;
    }

    .card-header {
        display: flex;
        align-items: center;
        background-color: transparent;
        justify-content: space-between;

        h1, h2, h3, h4, h5 {
            margin-bottom: 0;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .02em;
            font-size: 1rem;

            &:first-child > i {
                margin-right: 0.5rem;
            }
        }

        .nav:not(.nav-tabs) > li {
            &:last-child > a {
                padding-right: 0;
            }

            > a.nav-link {
                display: inline-block;
            }

            + li > a {
                position: relative;

                &:before {
                    content: ' ';
                    width: 1px;
                    background: rgba($dark, 0.1);
                    position: absolute;
                    left: 0;
                    top: 50%;
                    height: 14px;
                    margin-top: -7px;
                }
            }
        }

        .nav-tabs {
            align-items: center;

            .nav-link {
                border-bottom: 0 !important;
                position: relative;
                padding: 0 !important;

                &:before {
                    content: ' ';
                    width: 100%;
                    background: $primary;
                    position: absolute;
                    bottom: calc(-0.8rem - 3px);
                    height: 3px;
                    border-radius: 1.5px;
                    display: none;
                }

                &.active, &:hover, &:focus {
                    &:before {
                        display: block;
                    }
                }
            }

            &.nav-sm .nav-link:before {
                bottom: calc(-0.25rem - 3px);
            }
        }
    }

    &.card-collapse > .card-header {
        @extend .dropdown-indicator;
        cursor: pointer;

        &:after {
            right: 1rem;
            color: #6e84a3;
        }

        &:not(.show) {
            border-bottom: none;

            + .card-body {
                display: none;
            }
        }

        &.show + .card-body {
            display: block;
        }

        > *:last-child {
            margin-right: 1rem;
        }
    }

    .card-body {
        .table {
            th {
                background-color: $gray-200;
                padding: 0.95rem 0.95rem;
            }

            td {
                padding: 0.95rem 0.95rem;
            }
        }

        > *:last-child {
            margin-bottom: 0;
        }
    }

    > .card-header.toolbar {
        border-bottom-color: transparent;

        ~ .card-body {
            padding-top: 0;
        }
    }

    &.borderless {
        border: none;

        > .card-header {
            padding: 0;
        }
    }
}

.bg-none {
    background-color: transparent !important;
}

// first or last node hidden
.fl-hide {
    > :first-child .f-hide {
        display: none !important;
    }

    > :last-child .l-hide {
        display: none !important;
    }
}

.data-list tbody {
    > .data-item:first-child .f-hide {
        display: none !important;
    }

    > .data-item:last-child .l-hide {
        display: none !important;
    }
}

.show-visible {
    display: none;
}

.show {
    .show-visible {
        display: block;
    }

    .show-hide {
        display: none;
    }
}

// time line
.timeline {
    .line {
        position: relative;
        display: flex;
        align-items: baseline;
        padding-left: calc(1rem - 5px) !important; //12px

        &:before {
            content: '';
            position: absolute;
            border: 1px solid currentColor;
            height: 50%;
            top: 0;
            left: 1rem;
        }

        &:after {
            content: '';
            position: absolute;
            border: 1px solid currentColor;
            height: 50%;
            bottom: 0;
            left: 1rem;
        }

        > .circle {
            border: 2px solid currentColor;
            height: 12px;
            width: 12px;
            border-radius: 100%;
            background-color: currentColor;
            margin-right: calc(1rem - 5px); //12px
            z-index: 1;
        }
    }

    > :first-child .line:before {
        display: none;
    }

    > :last-child .line:after {
        display: none;
    }
}

@each $color, $value in $theme-colors {
    .timeline-#{$color} .line {
        &:before {
            border-color: $value;
        }

        &:after {
            border-color: $value;
        }

        > .circle {
            border-color: $value;
            background-color: $value;
        }
    }
}

// icon
.icon-48 {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    border: 1px solid $white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

// article
article, .marked, .mozmd-preview {
    blockquote {
        padding: 10px 15px;
        border-left: 3px solid $primary;
        font-size: inherit !important;
    }

    img {
        display: block;
        margin: 0 auto;
        margin-bottom: 1rem;
        max-width: 100%;
    }

    pre {
        border: 1px solid #efeeee;
        border-radius: 4px;
        margin-bottom: 1rem;
        position: relative;

        > a {
            position: absolute;
            top: 0.5rem;
            font-size: 1rem;
            display: none;

            &:hover, &:focus, &:active {
                text-decoration: none;
            }
        }

        &:hover > a {
            display: inline-block;
        }

        a.copy {
            right: 0.5rem;
        }
    }

    ul, ol, li {
        list-style: initial;
        margin-bottom: 0.5rem;
    }

    ul, ol {
        padding-left: 2rem;
        margin-bottom: 1rem;
    }

    blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child, ol ol, ol ul, ul ol, ul ul {
        margin-bottom: 0
    }

    > h6, > .h6, > h5, > .h5, > h4, > .h4, > h3, > .h3, > h2, > .h2, > h1, > .h1 {
        margin-bottom: 1rem;
        margin-top: 0.5rem;
        font-weight: 600;
    }

    a:hover, a:focus, a:active {
        text-decoration: underline;
    }

    .alert {
        > h6, > .h6, > h5, > .h5, > h4, > .h4, > h3, > .h3, > h2, > .h2, > h1, > .h1 {
            margin-top: 0;
            margin-bottom: 0.5rem;
        }
    }

    > p {
        text-indent: 2em;
    }

    > ul, > ol {
        margin-left: 1rem;
    }
}

.marked, .mozmd-preview {
    > h6, > .h6, > h5, > .h5, > h4, > .h4, > h3, > .h3, > h2, > .h2, > h1, > .h1 {
        &[id]:hover:after {
            content: '#';
            margin-left: 5px;
            color: $link-color;
            font-weight: normal;
        }
    }
}

// carousel
.carousel {
    --height: 500px;
    --min-height: 200px;
    --carousel-height: calc(var(--cvh) * var(--height));
    height: var(--carousel-height);
    min-height: var(--min-height);
    padding: 0;

    a, a:hover, a.active, .active a {
        text-decoration: none;
    }

    .carousel-inner, .carousel-item, .carousel-image {
        height: 100%;
        padding: 0;
    }

    .carousel-image {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .carousel-caption {
        position: static;
        text-align: left;
        height: var(--carousel-height);
        min-height: var(--min-height);
        display: flex;
        align-items: center;

        > div {
            max-width: 50%;

            h5 {
                font-weight: bold;
                font-size: 2.5rem;
            }

            p {
                margin-top: 2rem;
                line-height: 2;
            }
        }
    }
}

.text-popup {
    animation: text-popup 1s;
    user-select: none;
    white-space: nowrap;
    position: absolute;
    z-index: $zindex-tooltip;
    font-size: 12px;
}

@keyframes text-popup {
    0%, 100% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    100% {
        transform: translateY(-50px);
    }
}

.form-table {
    text-align: right;
    vertical-align: middle;

    th {
        width: 25%;
    }

    td .field-validation-error {
        display: block;
        text-align: left;
    }
}

// add 1440 container
@media (min-width: 1600px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1440px;
    }
}

// break code spaces
@include media-breakpoint-up(md) {
    article, .marked, .mozmd-preview {
        pre {
            white-space: break-spaces;
        }
    }
}

@include media-breakpoint-down(md) {
    .card-body {
        overflow-x: auto;
    }

    article, .marked, .mozmd-preview {
        word-wrap: break-word;
    }

    .carousel .carousel-caption > div {
        h5 {
            font-size: 1.5rem;
        }

        p {
            line-height: 1.5;
        }
    }
}

@include media-breakpoint-down(sm) {
    .toolbar {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}
